Здравствуйте. Пытаюсь реализовать передачу файлов (изображений) при помощи js на сервер (php скрипту). Реализую следующим образом (вкратце):
файл у клиента выбирается при помощи
<input type="file" multiple="true">
затем он считывается при помощи
$("input[type=file]").change(function(){
var f = $(this)[0].files;
displayFiles(f);
});
function displayFiles(files) {
...
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.attr('src', e.target.result);
};
})(li.imgbox.img);
reader.readAsDataURL(file);
}
потом, при клике на кнопку все выбранные файлы загружаются на сервер
xhr = new XMLHttpRequest();
reader = new FileReader();
...
reader.onload = function() {
xhr.open("POST", params.url);
var boundary = "xxxxxxxxx";
xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary);
xhr.setRequestHeader("Cache-Control", "no-cache");
var body = "--" + boundary + "\r\n";
body += "Content-Disposition: form-data; name='"+(params.fieldName || 'file')+"'; filename='" + params.file.name + "'\r\n";
body += "Content-Type: application/octet-stream\r\n\r\n";
body += reader.result + "\r\n";
body += "--" + boundary + "--";
if(xhr.sendAsBinary) {
// firefox
xhr.sendAsBinary(body);
} else {
// chrome (W3C spec.)
xhr.send(body);
}
}
reader.readAsBinaryString(params.file);
на сервере пока что происходит простейший прием файла php скриптом:
$uploadedFile = "upload/".$_FILES['new_pic']['name'];
if(is_uploaded_file($_FILES['new_pic']['tmp_name'])) {
if (move_uploaded_file($_FILES['new_pic']['tmp_name'], $uploadedFile)) {
$data['success'] = "Удачно передано";
} else {
$file_error=true;
$data['errors'] = "не удалось сохранить файл";
}
}
проблема в том, что данная реализация прекрасно работает в браузере Firefox, но отказывается работать в Google Chrome. Если точнее, то в хроме загрузка файла на сервер в принципе происходит, но файл после этого становится большего объема чем исходный и нечитаймый. т.е. если исходный файл pic.jpg весил 1Мб, то после передачи, на сервере он весит уже 1,2Мб и не открывается на просмотр. Короче становится "битым". А так же в хроме почему-то не получается передать большие файлы (около 2Мб) -
$_FILES['error'] возвращает
1 (превышен допустимый объем передаваемого файла). Хотя тот же самый файл прекрасно передается в браузере Firefox... Я так думаю что метод send() объекта XmlHttpRequest передает данные не корректно, т.к. метод sendAsBinary() в Firefox работает как надо.